<!--
 * @Author: wangming
 * @Date: 2021-07-12 14:36:25
 * @LastEditors: wangming
 * @LastEditTime: 2022-02-11 11:13:24
 * @FilePath: /hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/rightModel/components/hmCustomVue.vue
 * @Description: 自定义组件
-->
<template>
  <el-form-item label="Vue">
    <el-button
      @click="editJsx"
      type="primary"
      icon="el-icon-edit"
      plain
      size="mini"
      >代码编辑</el-button
    >
  </el-form-item>
</template>

<script>
import monacoEditor from "./hlTableList/monacoEditor/index.js";
import basicmixins from "./basicmixins";
const template = `/**
 * @param {*} render jsx 语法  h 系统预留字段
 * @param {*} props {
 * context:页面工具类对象,value:获取自定义组件双向绑定的值 
 * 字段是组件输入的数据字段code,可以通过this.$emit('input',value)修改
 * }  
 * @returns 
 */
export default {
  render(h){
    return (
      <div>
         自定义代码
      </div>
    )
  },
  props: ['value','context'],
  data() {
    return {
  
    }
  },
  computed:{},
  watch:{},
  mounted() {},
  methods: {},
}`;
export default {
  mixins: [basicmixins],
  data() {
    return {};
  },
  methods: {
    editJsx() {
      let jsx = this.value.__config.renderJsx || template;
      monacoEditor.showEdit(decodeURIComponent(jsx)).then((res) => {
        this.value.__config.renderJsx = encodeURIComponent(res);
      });
    },
  },
};
</script>

<style scoped lang="scss">
</style>
